<template>
  <div class="head-container">
    <!-- 搜索 -->
    <!-- <el-input v-model="query.eqptsystem" clearable placeholder="所属系统" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery"/>-->
    <el-select
      v-model="query.eqptsystem"
      clearable
      :style="style"
      class="filter-item"
      placeholder="所属系统"
      @change="selectFun"
    >
      <el-option
        v-for="(item, index) in eqptSystemList"
        :key="item.label + index"
        :label="item.label"
        :value="item.id"
      />
    </el-select>
    <el-select
      v-model="query.eqpttypeid"
      clearable
      :style="style"
      class="filter-item"
      placeholder="设备类型"
    >
      <el-option
        v-for="(item, index) in eqptTypeList"
        :key="item.name + index"
        :label="item.name"
        :value="item.id"
      />
    </el-select>
    <el-input
      v-model="query.eqptname"
      clearable
      placeholder="设备名称"
      style="width: 150px;"
      class="filter-item"
    />
    <el-select
      v-model="query.eqptstate"
      clearable
      :style="style"
      class="filter-item"
      placeholder="设备状态"
    >
      <el-option
        v-for="(item, index) in eqptstatelist"
        :key="item.label + index"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    <el-select v-model="query.brandname" clearable :style="style" class="filter-item" placeholder="品牌">
      <el-option
        v-for="(item, index) in eqptBrandList"
        :key="item.label + index"
        :label="item.label"
        :value="item.id"
      />
    </el-select>
    <el-input v-model="query.customerName" clearable placeholder="所属客户" style="width: 150px;" class="filter-item" @keyup.native="toQuery" />
    <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
    <!-- 新增 -->
    <div style="display: inline-block;margin: 0px 2px;">
      <el-button
        v-permission="['ADMIN','TEQUIPMENT_ALL','TEQUIPMENT_CREATE']"
        class="filter-item"
        size="mini"
        type="primary"
        icon="el-icon-plus"
        @click="newEqpt"
      >
        新增
      </el-button>
      <eForm ref="form" :is-add="true" :is-view="false" />
    </div>
  </div>
</template>

<script>
import eForm from './form'
import { getDictDetails } from '@/api/dictDetail'
import { getAllEqptType } from '@/api/tEqpttype'
export default {
  components: { eForm },
  props: {
    query: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      eqptstatelist: [], eqptSystemList: [], eqptTypeList: [], eqptBrandList: [], eqptModelnameList: []
    }
  },
  created() {
    const explorer = navigator.userAgent
    if (explorer.indexOf('Chrome') >= 0) {
      this.style = 'width: 150px'
    } else {
      this.style = 'width: 142px'
    }
    this.getEqptSystem()
    this.getEqptBrand()
    this.getEqptStates()
    this.getAllModels()
  },
  methods: {
    toQuery() {
      this.$parent.page = 0
      this.$parent.init()
    },
    newEqpt() {
      this.$refs.form.dialog = true
      this.$refs.form.getEqptStates()
      this.$refs.form.getEqptSystem()
      this.$refs.form.getEqptBrand()
    },
    selectFun() {
      this.getEqptType(this.query.eqptsystem)
    },
    getEqptStates() {
      getDictDetails('eqpt_status').then(res => {
        this.eqptstatelist = res.content
      })
    },
    getEqptSystem() {
      getDictDetails('eqpt_system').then(res => {
        this.eqptSystemList = res.content
      })
    },
    getEqptBrand() {
      getDictDetails('eqpt_brand').then(res => {
        this.eqptBrandList = res.content
      })
    },
    getEqptType(systemid) {
      if (systemid) {
        this.eqptTypeList = []
        this.$set(this.query, 'eqpttypeid', '')
        getAllEqptType(systemid).then(res => {
          this.eqptTypeList = res.content
        }).catch(err => {
          console.log(err)
        })
      }
    },
    // 全部类型
    getAllModels() {
      getAllEqptType().then(res => {
        this.eqptModelnameList = res.content
        console.log(this.eqptModelnameList)
      }).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>
